/**
 * @file: 门店管理
 * @author: Lengxx
 * @date: 2024-07-12
 */
<template>
  <PageWrapper title="门店管理" >
    <TableFilterForm :formState="formState" @search="onSearch">
      <FormItem label="门店名称" name="name">
        <Input v-model:value="formState.name" />
      </FormItem>
    </TableFilterForm>
    <BasicTable @register="register">
      <template #toolbar>
        <Button type="primary" @click="onAddStoreTap">新增门店</Button>
      </template>
      <template #status="{ record }">
        <Tag color="green" v-if="record.status === IStoreStatusEnums.Running">运行中</Tag>
        <Tag color="orange" v-if="record.status === IStoreStatusEnums.Stop">未运行</Tag>
      </template>
      <template #operation="{ record }">
        <Button type="link" size="small" @click="onRowAction(TableRowActionEnum.Edit, record)">编辑</Button>
        <Button v-if="record.status === IStoreStatusEnums.Stop" type="link" danger size="small" @click="onRowAction(TableRowActionEnum.Delete, record)">删除</Button>
      </template>
    </BasicTable>

    <AddStoreModal @register="registerAddStoreModal" @submit="onAddStoreSubmit" />
  </PageWrapper>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { get } from 'lodash-es';
import * as api from '@/api/permisson/store'
import { PageWrapper } from '@/components/Page'
import { tableColumns } from './settings';

import { useRequest } from '@vben/hooks'
import { useModal } from '@/components/Modal'
import { useMessage } from '@/hooks/web/useMessage'
import { BasicTable, useTable, TableFilterForm } from '@/components/Table'

import AddStoreModal from './components/AddStoreModal.vue'
import { Button, Tag, FormItem, Input } from 'ant-design-vue'
import { ModalTypeEnum, TableRowActionEnum } from '@/enums/appEnum';
import { IStoreListItem, IStoreStatusEnums } from '@/api/permisson/model/store';

const formState = ref({
  name: ''
})

const { loading, data, runAsync } = useRequest(api.getStoreList);

const [registerAddStoreModal, { openModal: openAddStoreModal, closeModal }] = useModal();
 
const [register] = useTable({
  loading,
  dataSource: data || [],
  columns: tableColumns,
})

const { createErrorModal } = useMessage()

function onAddStoreTap() {
  openAddStoreModal(true, { modelType: ModalTypeEnum.Add });
}

/** 表格行操作行为 */
function onRowAction(eventType: TableRowActionEnum, record: IStoreListItem) {
  switch (eventType) {
    case TableRowActionEnum.Delete:
      const { destroy } = createErrorModal({
        title: '提示',
        content: '是否删除该数据？',
        onOk: async () => {
          const id = get(record, 'id');
          if (id) {
            destroy();
            await api.deleteStoreById(id);
            runAsync();
          }
        }
      })
      break;
    case TableRowActionEnum.Edit:
      openAddStoreModal(true, { modelType: ModalTypeEnum.Edit, ...record });
      break;
  }
}

function onSearch() {
  const name = get(formState.value, 'name', '');
  runAsync(name);
}

function onAddStoreSubmit() {
  closeModal();
  runAsync();
}

</script>

<style lang="less" scoped>
</style>
